/*
  学习目标：React中样式处理-行内样式
  
  语法： style ={样式对象}  {{css属性名： 属性值}}
  注意：
    1. 💥 React行内样式中属性名，不支持字符加连字符的写法
       👍连字符使用驼峰式写法
    2. px单位可以省略，使用数字表示
*/

import React from 'react';
import ReactDOM from 'react-dom';

const divNode = (
  <>
    {/* ✅ */}
    <h1 style={{ color: 'green', fontSize: '12px' }}>hello 71</h1>
    {/* ❌ */}
    {/* <h1 style={{ color: 'green', 'font-size': '12px' }}>hello 71</h1> */}
    {/* 2. px单位可以省略，使用数字表示 */}
    <h1 style={{ color: 'green', fontSize: 12 }}>hello 71</h1>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
